<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_页面固定广告</title>
    <style>
        .main {
          margin-top: 130px;
        }
        .top {
          background-color: #70ff58;
          height: 120px;
          color: #fff;
          font-size: 30px;
          position: fixed;
          top: 0;
          width: 100vw;
        }
        .left,.right {
          width: 60px;
          height: 200px;
          position: fixed;
          top: 300px;
        }
        .left {
          background-color: #fff799;
          left: 20px;
        }
        .right {
          background-color: #f35336;
          right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium adipisci blanditiis consectetur
        consequuntur culpa cumque deleniti dignissimos dolores exercitationem facere fugit illum, inventore nisi non
        nulla
        obcaecati pariatur vel?
    </div>
    <div>A culpa cum cupiditate eaque, excepturi exercitationem, facilis inventore minus odit omnis, praesentium quidem
        repellat similique voluptatibus voluptatum. Blanditiis consequatur delectus nobis officia. Aperiam at ipsa minus
        mollitia odio temporibus!
    </div>
    <div>Animi, aperiam debitis dolor doloribus, dolorum ea eos in laudantium quae, quaerat rerum sit tempore veniam
        veritatis voluptatem? A numquam possimus sapiente similique voluptatem! Aperiam assumenda at quod tenetur
        voluptatum?
    </div>
    <div>Ab accusamus animi dolore exercitationem odio, perferendis repellat! Aliquid architecto blanditiis cupiditate
        excepturi facilis ipsa iste, iusto, labore laudantium nihil qui sequi sunt, tenetur veniam vitae. Ipsa odit sint
        totam!
    </div>
    <div>A accusantium animi aut blanditiis commodi consequuntur cumque debitis dignissimos dolore dolorum eaque eius
        enim est id inventore ipsa magnam modi, necessitatibus numquam perferendis praesentium quidem, quos,
        reprehenderit
        totam voluptas?
    </div>
    <div>Accusamus alias dolores hic id incidunt laborum laudantium nemo recusandae repudiandae. Aspernatur assumenda
        debitis, doloremque, incidunt molestiae natus officiis quae quas quis, similique sint temporibus ullam
        veritatis!
        Esse, natus, ut?
    </div>
    <div>Consequatur, natus, nisi. Doloremque, eius modi necessitatibus odio quaerat quisquam vero? Ab adipisci beatae
        consequatur dolor doloremque impedit in quaerat sequi sunt, tempore? Accusamus aperiam architecto numquam rem
        voluptatum. Officiis.
    </div>
    <div>Alias autem beatae commodi deleniti distinctio eaque eligendi error exercitationem facilis harum hic iste
        minima mollitia nisi possimus quam quasi saepe similique soluta suscipit, veritatis voluptas voluptatibus?
        Atque,
        nihil quam?
    </div>
    <div>A ad, deleniti eveniet facere non omnis vero vitae voluptates. At corporis doloremque eos in ipsum labore
        tenetur veritatis vero. Dolorem, facere fugit magnam minima nisi quidem sint soluta voluptates?
    </div>
    <div>Accusantium, atque aut, consequatur cum dignissimos doloremque eius error est facilis fuga inventore ipsa
        maxime minus modi molestiae nihil non odio praesentium quam quas sit velit vitae. Perferendis, repellendus
        velit.
    </div>
    <div>Ab aspernatur aut delectus ducimus exercitationem expedita, fugit in iusto labore rem, soluta unde? Amet
        architecto aspernatur at, consequatur dolore eum modi nam necessitatibus nulla, possimus saepe sunt suscipit
        veniam.
    </div>
    <div>Accusamus asperiores dolores eos eveniet, hic illo laudantium mollitia possimus quia recusandae sit sunt.
        Accusantium asperiores consequuntur ex fuga incidunt iure iusto, natus odio odit qui quidem quo recusandae
        voluptatem.
    </div>
    <div>Corporis cupiditate deserunt, dolor ex maxime nisi optio perspiciatis quae, quia quis, repellendus rerum
        sapiente sunt velit voluptatibus? Et, in, rem. Error ex illum ipsa neque, porro quasi sequi suscipit?
    </div>
    <div>Blanditiis consequatur cum delectus deserunt fuga quasi, quisquam recusandae unde! Aliquam cum cupiditate dolor
        dolore doloremque, hic labore maiores necessitatibus nihil optio pariatur placeat porro possimus repellendus
        totam
        ut veniam?
    </div>
    <div>Aspernatur atque ipsam magnam sapiente! Accusantium ad aliquid commodi delectus dicta eaque ex hic impedit,
        laborum numquam odit porro possimus quae qui, repellat rerum sequi similique sit tempora veritatis vero!
    </div>
    <div>A blanditiis dolorum, ducimus eligendi eum fugiat, harum id laborum magni, nihil quae quidem quisquam
        recusandae? Accusamus adipisci commodi eius eos iste iure minus necessitatibus neque, nobis quod sit, veritatis.
    </div>
    <div>Alias beatae et iusto laboriosam optio praesentium provident recusandae rerum sapiente velit vitae voluptate
        voluptatem, voluptates! Aspernatur assumenda consectetur est exercitationem fugit minima nisi quam, recusandae,
        saepe unde vero voluptas.
    </div>
    <div>Accusamus alias amet autem blanditiis consectetur dicta doloremque est et fugiat incidunt natus necessitatibus
        neque possimus quae quidem reiciendis repellendus rerum, suscipit tempora unde velit veniam voluptate
        voluptates!
        Distinctio, eos?
    </div>
    <div>Ab aliquid aperiam dicta dolorem nostrum ratione reprehenderit vero voluptate. Commodi, consectetur debitis
        deserunt maxime sit voluptatum? Animi beatae debitis eum excepturi explicabo necessitatibus, provident quasi
        sequi
        vel, velit voluptas!
    </div>
    <div>Commodi consectetur corporis dolores earum eligendi eos eveniet illo iure laboriosam nihil nisi quibusdam
        quisquam recusandae tempora, totam ut vero! Aliquid at, harum odit porro possimus repellendus reprehenderit
        voluptatem. Unde.
    </div>
    <div>A eos excepturi fugit magni nemo nihil quam qui repudiandae! Atque cumque deleniti fugit itaque quae. Ab
        blanditiis facere nihil non quas, quos unde vero voluptatum. Aliquam molestiae nam suscipit.
    </div>
    <div>Adipisci aliquam at consectetur deserunt dolor eius eligendi eos eum exercitationem expedita illo illum
        laboriosam maiores minima molestias non, odit optio praesentium provident quam quisquam quo ratione
        reprehenderit
        tempore, vero.
    </div>
    <div>Aperiam cum dolore eaque, enim facilis libero molestiae nam nemo omnis porro, rerum sapiente sint tempore. Et
        eveniet expedita odio quaerat quod tempora unde! Adipisci blanditiis delectus inventore quam tempora!
    </div>
    <div>Ad aut autem cupiditate et excepturi facilis hic incidunt inventore itaque laudantium molestiae quasi sequi,
        tempora velit vitae. Non, possimus quae. Alias at enim quibusdam. Cumque id iure nobis vitae!
    </div>
    <div>Ab accusamus ad atque dolore, doloremque esse impedit ipsum libero maiores maxime officia quas quibusdam sequi
        sint sit, veritatis vero voluptate? Deleniti ducimus earum excepturi magni molestiae qui quo veritatis.
    </div>
    <div>Ab harum illum, qui quisquam quod velit? Architecto dolor doloribus esse expedita id, labore molestias nemo,
        nesciunt obcaecati perferendis quasi saepe veritatis. At consectetur maxime pariatur quaerat sapiente similique
        sint?
    </div>
    <div>Ab alias amet aperiam autem, distinctio dolorum earum eius enim fuga incidunt minima nam nulla officia quisquam
        rem, repellendus, sed? Blanditiis exercitationem laborum natus possimus quae ratione sit sunt totam?
    </div>
    <div>Deleniti dicta eligendi quam vel? Alias amet beatae doloremque eligendi error excepturi facilis ipsam iste
        itaque, minima neque nesciunt nostrum odit officia quas quod repellendus, sapiente sunt ullam voluptas
        voluptates.
    </div>
    <div>Architecto at beatae consectetur labore ratione soluta sunt! Accusantium autem consequatur, delectus eius hic
        id magni nemo nesciunt non, praesentium quo ratione rem velit, voluptatem voluptatum? Placeat reiciendis
        repellat
        voluptas.
    </div>
    <div>Aliquam, atque culpa dolor ex illum incidunt iste, laudantium, minus officiis perferendis vero voluptate. Ad
        aliquid, minus quasi reiciendis sequi veniam voluptatibus? Eum ipsum iste magnam nulla perspiciatis, quos velit.
    </div>
    <div>Animi assumenda excepturi ipsum molestiae non odio saepe sed veritatis vero. Consectetur culpa earum eum
        exercitationem illum laudantium nostrum odit pariatur quae quam quos repellat rerum, soluta velit voluptatem?
        Temporibus!
    </div>
    <div>Accusamus animi architecto commodi cupiditate dolorem doloremque earum incidunt officia reiciendis sed! Alias
        aliquam aut autem eligendi fuga non totam unde? A aperiam assumenda dolorem eligendi hic quia suscipit. Cum.
    </div>
    <div>Architecto consequuntur ea natus necessitatibus possimus quaerat sequi sunt. Aspernatur assumenda deserunt
        dolorum eius excepturi laborum odio pariatur quo ullam voluptatem. Animi eveniet expedita maxime neque
        praesentium
        quas, quod ratione.
    </div>
    <div>Autem ea est hic, illum iste libero molestias mollitia porro possimus quam qui repellendus, sed temporibus
        voluptate voluptates? Aliquam eius, repudiandae sit veniam vero vitae voluptatem? Expedita laboriosam laudantium
        quidem?
    </div>
    <div>Atque, commodi, quaerat! Accusantium consequatur doloremque ducimus facere hic impedit laboriosam natus
        perferendis possimus, qui quo quod tempora unde vel voluptates? Aliquam animi cumque, esse mollitia perferendis
        sequi tenetur voluptates.
    </div>
    <div>Ab architecto hic iusto perferendis, provident quam quas tempora. Accusamus aperiam asperiores delectus
        deserunt, dolorem doloremque fugit incidunt nulla optio quidem rerum sint unde vitae. Molestias quibusdam quos
        soluta vero!
    </div>
    <div>Consectetur consequatur cumque debitis facere sit suscipit, ullam vel! Aperiam, architecto assumenda dicta,
        dolorem ea eaque error eveniet harum iusto numquam, optio quisquam totam voluptates? Culpa nobis nostrum officia
        saepe.
    </div>
    <div>Aperiam at doloribus esse et molestias quam vero! Assumenda blanditiis culpa deserunt eaque eligendi, fuga
        fugit harum illo ipsam, ipsum iure neque nesciunt odio quae, quasi sequi totam voluptatibus voluptatum.
    </div>
    <div>Doloremque, ipsum, molestiae. A autem numquam officia quo rem soluta, suscipit voluptate. Atque, autem
        doloribus laboriosam nobis tempore velit. A beatae ipsam ratione sapiente voluptatum. Culpa excepturi
        repudiandae
        suscipit vel!
    </div>
    <div>Accusamus aliquid corporis minima nihil non repellat totam? A aliquid amet animi aperiam autem dignissimos
        dolore earum eligendi eum, explicabo in laboriosam maxime necessitatibus quam ratione reiciendis sint voluptas
        voluptatem?
    </div>
    <div>Aliquam aperiam aut, cum dolorem dolorum, eveniet ex exercitationem inventore magni molestiae nobis nulla
        officiis provident quia ratione tempora tenetur voluptas voluptatibus! Atque ipsum laudantium odio quasi? Eius,
        placeat, velit.
    </div>
    <div>Corporis dicta dolor eius harum neque nobis numquam officia officiis pariatur quae. A amet esse explicabo nihil
        quasi quia ratione tempora? Accusantium animi cum eveniet, explicabo facere molestiae optio perspiciatis.
    </div>
    <div>Alias aliquam debitis delectus dignissimos eos esse eveniet, impedit laboriosam libero maxime minima mollitia
        pariatur quis quisquam saepe sed veritatis voluptatum. Deserunt dicta dolores incidunt, iste iusto molestias
        sapiente tenetur?
    </div>
    <div>Eius eligendi, nulla! Cumque dicta et inventore ipsum laborum non nulla quis, quo quod suscipit, unde vel?
        Autem delectus eligendi, est, eum fugiat omnis provident quam, quia sed sequi tempore!
    </div>
    <div>Aspernatur consequatur corporis error, expedita, facere illum incidunt neque nobis nostrum obcaecati
        perferendis quo saepe sapiente, sint soluta vero voluptate? A ab distinctio doloribus ducimus nihil odit
        pariatur
        perspiciatis quaerat.
    </div>
    <div>Dignissimos itaque magnam quaerat sequi vel voluptas voluptatibus. Aspernatur impedit itaque placeat quas
        veniam? Aliquid assumenda consectetur, earum fugiat fugit laudantium, perferendis quaerat qui saepe similique
        sunt
        totam ullam voluptate.
    </div>
    <div>Alias aliquid, aperiam blanditiis commodi cumque cupiditate debitis delectus doloremque dolores earum et
        eveniet illum inventore iure molestiae nam, nesciunt obcaecati omnis optio ratione sed ullam vero vitae? Hic,
        similique.
    </div>
    <div>Corporis dolorem esse fugit, incidunt mollitia vitae. Amet culpa debitis delectus deleniti error et, facilis
        laboriosam laudantium minus nam nihil numquam odio quia quisquam recusandae repellat repudiandae soluta tenetur
        voluptas.
    </div>
    <div>Accusamus animi dolorem esse explicabo fugit labore molestias odit perferendis quos ratione. Accusantium
        architecto beatae deleniti ducimus fugit impedit mollitia, quidem rem sapiente temporibus! At magni quae sunt
        vitae voluptatibus!
    </div>
    <div>Accusamus molestias obcaecati voluptatum. Dignissimos dolorum error illo, ipsa labore maiores nihil nisi
        reprehenderit tempora tempore temporibus veniam veritatis voluptatibus. Eius ipsa laboriosam modi non nulla
        numquam qui voluptas voluptatem.
    </div>
</div>
</body>
</html>